CSS (Cascading Style Sheets) একটি স্টাইল শিট ভাষা, যা HTML বা XML ডকুমেন্টের উপস্থাপনা নিয়ন্ত্রণ করতে ব্যবহৃত হয়। CSS এর মাধ্যমে ওয়েব পেজের টেক্সট, বাটন, লেআউট, ব্যাকগ্রাউন্ড, এবং অন্যান্য ভিজ্যুয়াল উপাদান কাস্টমাইজ করা যায়। এই উদাহরণগুলির মাধ্যমে CSS-এর মৌলিক ধারণাগুলি ও ব্যবহারের কৌশলগুলি বোঝানো হবে।
এখানে, একটি প্যারাগ্রাফের font size, font color, এবং font style কিভাবে পরিবর্তন করা হয়, তা দেখানো হয়েছে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
p {
font-size: 20px; /* ফন্ট সাইজ ২০px */
color: green; /* ফন্টের রঙ সবুজ */
font-style: italic; /* ফন্ট স্টাইল ইটালিক */
}
</style>
</head>
<body>
<p>এটি একটি উদাহরণ প্যারাগ্রাফ যা CSS দিয়ে স্টাইল করা হয়েছে।</p>
</body>
</html>
ব্যাখ্যা:
এখানে, একটি div ব্লকের ব্যাকগ্রাউন্ড রঙ কিভাবে পরিবর্তন করা হয়, তা দেখানো হয়েছে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Example</title>
<style>
div {
background-color: lightblue; /* ব্যাকগ্রাউন্ড রঙ লাইট ব্লু */
padding: 20px; /* প্যাডিং ২০px */
}
</style>
</head>
<body>
<div>
<h2>এটি একটি div ব্লক যা CSS দিয়ে স্টাইল করা হয়েছে।</h2>
<p>ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এই উদাহরণে, আমরা একটি হেডিং ট্যাগের font family পরিবর্তন করব।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font Family Example</title>
<style>
h1 {
font-family: 'Arial', sans-serif; /* ফন্ট ফ্যামিলি Arial */
color: blue; /* রঙ নীল */
}
</style>
</head>
<body>
<h1>এই হেডিংয়ের ফন্ট ফ্যামিলি পরিবর্তন করা হয়েছে।</h1>
</body>
</html>
ব্যাখ্যা:
এখানে, আমরা একটি div এলিমেন্টকে সেন্টার করতে দেখাবো।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centering Element with CSS</title>
<style>
.center-div {
width: 300px;
height: 200px;
margin: 0 auto; /* সেন্টার করার জন্য মার্জিন */
background-color: lightgreen;
text-align: center;
line-height: 200px; /* উল্লম্বভাবে সেন্টার */
}
</style>
</head>
<body>
<div class="center-div">
<p>এই div এলিমেন্টটি সেন্টারে রয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এখানে, একটি বর্ডার এবং প্যাডিং সহ একটি div এলিমেন্ট প্রদর্শন করা হয়েছে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border and Padding Example</title>
<style>
.box {
width: 200px;
height: 100px;
border: 2px solid black; /* বর্ডার যোগ করা */
padding: 20px; /* প্যাডিং যোগ করা */
}
</style>
</head>
<body>
<div class="box">
<p>এই div এর চারপাশে বর্ডার এবং প্যাডিং রয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এখানে, CSS গ্রিড ব্যবহার করে একটি লেআউট তৈরি করা হয়েছে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout Example</title>
<style>
.container {
display: grid; /* গ্রিড লেআউট সক্রিয় করা */
grid-template-columns: repeat(3, 1fr); /* ৩টি কলাম */
gap: 10px; /* কলামের মধ্যে গ্যাপ */
}
.box {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
CSS Hover ইফেক্ট ব্যবহার করে, আপনি একটি এলিমেন্টের উপর মাউস রাখলে এর চেহারা পরিবর্তন করতে পারেন।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hover Example</title>
<style>
button {
padding: 10px 20px;
background-color: lightcoral;
border: none;
color: white;
cursor: pointer;
}
button:hover {
background-color: darkred; /* Hover state */
}
</style>
</head>
<body>
<button>Hover Over Me</button>
</body>
</html>
ব্যাখ্যা:
CSS (Cascading Style Sheets) হল একটি শক্তিশালী ভাষা যা HTML ডকুমেন্টের দৃশ্যমান উপাদান এবং লেআউট নিয়ন্ত্রণ করতে ব্যবহৃত হয়। আমরা বিভিন্ন CSS উদাহরণ দিয়ে দেখেছি কিভাবে আপনি টেক্সট স্টাইলিং, ব্যাকগ্রাউন্ড রঙ, বর্ডার, গ্রিড লেআউট, হোভার ইফেক্ট এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে পারেন। CSS হল ওয়েব ডিজাইনের মূল অংশ এবং এটি আপনার ওয়েব পেজের ডিজাইন ও পারফরম্যান্স উন্নত করতে সহায়ক।
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
